<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-circle-plus-outline"
        @click="toPublish"
      >去发文章
      </el-button>
      <el-input
        v-model="searchText"
        placeholder="输入标题"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleSearch"
      />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">
        搜索
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-refresh" @click="handleRefresh" />
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      size="small"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        prop="id"
        label="ID"
        align="center"
        width="50px"
      />
      <el-table-column
        prop="title"
        label="标题"
      />
      <el-table-column
        prop="created_at"
        label="发布时间"
      />
      <el-table-column
        prop="updated_at"
        label="更新时间"
      />
      <el-table-column label="文章封面" align="center">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="" trigger="click">
            <img :src="scope.row.cover_url" alt="" style="width: 180px;height: 180px">
            <img slot="reference" :src="scope.row.cover_url" style="width: 30px;height: 30px" :alt="scope.row.title">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="recommended"
        label="推荐"
        align="center"
      >
        <template scope="scope">
          <el-switch
            v-model="scope.row.recommended"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="is_public"
        label="公开"
        align="center"
      >
        <template scope="scope">
          <el-switch
            v-model="scope.row.is_public"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="edit(scope.$index, scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="changePage"
    />
    <div style="text-align: right;  padding: 32px 16px;">
      <el-pagination
        background
        layout="total ,sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 20, 50]"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="changePage"
      />
    </div>
  </div>
</template>

<script>
import { deleteArticle, getArticleList, getArticleListBySearchText } from '@/api/article'

export default {
  name: 'ArticleList',
  data() {
    return {
      listLoading: false,
      searchText: '',
      tableKey: 0,
      formLabelWidth: '80px',
      pageSize: 10,
      currentPage: 1,
      total: 0,
      tableData: []
    }
  },
  created() {
    this.getArticles()
  },
  methods: {
    getArticles() {
      this.listLoading = true
      getArticleList(this.currentPage, this.pageSize).then(res => {
        const { data } = res
        this.tableData = data['list']
        this.total = data['cnt']
        this.listLoading = false
      })
    },
    handleSearch() {
      if (this.searchText.length === 0) {
        return
      }
      this.listLoading = true
      getArticleListBySearchText(this.searchText).then(res => {
        const { data } = res
        this.tableData = data['list']
        this.listLoading = false
      })
    },
    handleDelete(index, row) {
      deleteArticle(row['id']).then(() => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.handleRefresh()
      })
    },
    changePage(currentPage) {
      this.currentPage = currentPage
      this.handleRefresh()
    },
    handleRefresh() {
      this.getArticles()
    },
    toPublish() {
      this.$router.push({ name: 'Publish' })
    },
    edit(index, row) {
      this.$router.push({ name: 'EditArticle', params: { articleId: row.id }})
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.handleRefresh()
    }
  }
}
</script>

<style scoped>

</style>
